<template>
    <ul>
        <router-link to="/films/nowplaying" custom v-slot="{navigate , isActive}">
            <li @click="navigate" >
            <span :class="isActive?'kerwinactive':''">正在热映</span>
            </li>
        </router-link>
        <router-link to="/films/comingsoon" custom v-slot="{navigate , isActive}">
            <li @click="navigate" >
            <span :class="isActive?'kerwinactive':''">即将上映</span>
            </li>
        </router-link>
    </ul>
</template>
<script>

export default {

}
</script>
<style lang="scss" scoped>
ul{
    display: flex;
    height: 3.0625rem;
    li{
        flex: 1;
        text-align: center;
        line-height:3.0625rem;
        span{
            font-size: 14px;
            text-align: center;
            height: 1rem;
            line-height: 1rem;

        }
    }
    .kerwinactive{
        color: red;
        border-bottom: 2px solid red;
    }
    z-index: 100;
 }

</style>
